<template>
	<view class="tabbar">
		<view class="tabbar-item" @click="handleTo('home')">
			<image v-if="pages !== 'pages/home/index'" class="icon" src="@/static/icon/home.png" mode="aspectFit"></image>
			<image v-else class="icon" src="@/static/icon/homeActive.png" mode="aspectFit"></image>
			<text>首页</text>
		</view>
		<view class="tabbar-item" @click="handleTo('user')">
			<image v-if="pages !== 'pages/user/index'" class="icon" src="@/static/icon/setting.png" mode="aspectFit"></image>
			<image v-else class="icon" src="@/static/icon/settingActive.png" mode="aspectFit"></image>
			<text>个人</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pages:"",
			}
		},
		mounted() {
			var onTimepages = getCurrentPages() // 获取栈实例
			this.pages = onTimepages[onTimepages.length - 1].route // 获取当前页面的数据，包含页面路由
		},
		methods: {
			handleTo(path) {
				console.log(`pages/${path}/index`)
                uni.switchTab({url: `/pages/${path}/index`})
			},
		}
	}
</script>
<style scoped lang="scss">
.tabbar {
	width: 100vw;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;

	.tabbar-item {
		width: 80rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			display: block;
			width: 100%;
			font-size: 20rpx;
			text-align: center;
		}

		.icon {
			width: 45rpx;
			height: 45rpx;
			margin-bottom: 6rpx;
		}
	}
}
</style>
